<template>
	<view class="flex-col bGqu">
		<my-login ref="loginRef" @loginSuccess="updateUserInfo"></my-login>
		<view class="flex-col flex-1 group">
			<view class="flex-col justify-start section">
				<view class="flex-row items-center group_2" v-if="type == true">
					<image class="shrink-0 image_4" :src="userInfo.avatar" />
					<view class="flex-col items-start flex-1 group_4 ml-10-5">
						<text class="text_4">{{userInfo.nickname}}</text>
						<text class="mt-16 text_5">让身边每个人都可以放心使用的搬家服务品牌～</text>
					</view>
				</view>

				<!-- 未登录 -->
				<view class="flex-row items-center group_2" v-if="type == false">
					<view class="flex-col justify-start items-center image-wrapper" @click="login()">
						<image class="image_4" src="/static/icon/wdltx.png" />
					</view>
					<view class="flex-col items-start ml-10-5" @click="login()">
						<text class="text_41">未登录</text>
						<text class="text_51 mt-12-51">点击登录</text>
					</view>
				</view>


			</view>
			<image class="shrink-0 image_5" src="/static/icon/minaut.png" @click="open" />
			<view class="flex-col section_2">
				<view class="flex-row justify-between items-center group_12  " v-for="(item,index) in list "
					@click="tab(index)">
					<view class="flex-row items-center">
						<image class="shrink-0 image_6" :src="item.image" />
						<text class="ml-12 font_2 text_6">{{item.text}}</text>
					</view>
					<image class="image_7 image_8" src="/static/icon/right.png" />
				</view>
			</view>
		</view>
	</view>

	<view class="bottom">
		<u-popup :show="show" mode="center" :round="15">

			<view class="flex-col section_3">
				<view class="flex-row justify-center items-center relative group_5">
					<text class="font_3 text_6">四大搬家承诺</text>
					<image class="image_8 pos_2" @click="open" src="/static/icon/x.png" />
				</view>
				<view class="flex-col group_6">
					<view class="flex-row items-center self-stretch">
						<view class="flex-col justify-start items-center text-wrapper"><text class="font_5">赔</text>
						</view>
						<text class="font_4 text_7 ml-9-5">乱收费2倍赔偿</text>
					</view>
					<text class="self-start font_2 text_8 mt-5">未按收费标准收取的额外费用，双倍赔偿</text>
				</view>
				<view class="flex-col group_7">
					<view class="flex-row items-center self-stretch">
						<view class="flex-col justify-start items-center text-wrapper"><text class="font_5">赔</text>
						</view>
						<text class="font_4 text_9 ml-9-5">订单爽约5倍订金赔偿</text>
					</view>
					<text class="self-end font_2 text_10 mt-5">到达约定服务时间，师傅单方面爽约，赔偿5倍订金</text>
				</view>
				<view class="flex-col group_8">
					<view class="flex-row items-center self-stretch">
						<view class="flex-col justify-start items-center text-wrapper"><text class="font_5">赔</text>
						</view>
						<text class="font_4 text_11 ml-9-5">货损理赔无门槛最高5000元</text>
					</view>
					<text class="self-center font_2 mt-5">服务期间如有货损立即受理，72小时内赔付</text>
				</view>
				<view class="flex-col group_9">
					<view class="flex-row items-center self-stretch">
						<view class="flex-col justify-start items-center text-wrapper"><text class="font_5">赔</text>
						</view>
						<text class="font_4 text_12 ml-9-5">不满意免费换</text>
					</view>
					<text class="self-center font_2 text_13 mt-5-5">不满意搬家师傅服务态度可免费更换或取消</text>
				</view>
			</view>


		</u-popup>



	</view>


</template>




<script>
	import {
		SystemConfig
	} from '@/utils/user.js';


	import MyLogin from '@/components/login.vue'; // 导入 login 组件


	export default {
		components: {
			'my-login': MyLogin // 注册 my-login 组件
		},
		data() {
			return {

				system: {},


				userInfo: {

				},
				type: false,

				show: false,
				list: [{
					image: "/static/icon/dd.png",
					text: "订单"
				}, {
					image: "/static/icon/fwjs.png",
					text: "服务介绍"
				}, {
					image: "/static/icon/sfbz.png",
					text: "收费标准"
				}, {
					image: "/static/icon/yjfk.png",
					text: "意见反馈"
				}, {
					image: "/static/icon/kfrx.png",
					text: "客服热线"
				}, {
					image: "/static/icon/gywm.png",
					text: "关于我们"
				}, {
					image: "/static/icon/sz.png",
					text: "设置"
				}]

			}
		},
		onLoad() {



		},
		onShow() {
			this.oute()


			var LoginData = uni.getStorageSync('LoginData');


			if (LoginData) {
				var myData = uni.getStorageSync('rawData');

				var data = JSON.parse(myData)
				this.userInfo = LoginData
				this.type = true

			} else {
				this.userInfo = {}
				this.type = false
			}

		},
		methods: {




			oute() {

				SystemConfig().then(res => {
					console.log(res)
		 
					this.system = res.data.data
					// // 将数据存储到本地缓存中
					uni.setStorageSync('system', res.data.data);

				}).catch(error => {
					console.error('SystemConfig 方法执行出错：', error);
				});
			},



			// 更新头像和昵称
			updateUserInfo(userInfo) {

				var LoginData = uni.getStorageSync('LoginData');

				// var myData = uni.getStorageSync('rawData');
				// var data = JSON.parse(myData)


				this.userInfo = LoginData
				this.type = true

			},

			login() {
				// 通过 $refs 获取子组件实例
				const loginComponent = this.$refs.loginRef;
				// 调用子组件方法
				loginComponent.open();
			},

			open() {
				this.show = !this.show
			},
			tab(i) {
				console.log(i)

				if (i == 0) {

					wx.switchTab({
						url: '/pages/orderlist/orderlist'
					})


					return

				} else if (i == 1) {
					var url = '../Service/Service'
				} else if (i == 2) {
					var url = '../Feestandards/Feestandards'
				} else if (i == 3) {
					var url = '../Feedback/Feedback'
				} else if (i == 4) {
					// 使用模板字符串拼接
					let itemList = [`拨打+${this.system.mobile}`];
					uni.showActionSheet({
						itemList: itemList,
						success: function(res) {
							uni.makePhoneCall({
								phoneNumber: system.mobile,
								success: function() {
									console.log('拨打电话成功');
								},
								fail: function(err) {
									console.log('拨打电话失败：' + JSON.stringify(err));
								}
							});

						}
					});
					return
				} else if (i == 5) {
					var url = '../About/About'
				} else if (i == 6) {
					var url = '../setup/setup'
				}

				uni.navigateTo({
					url
				});

			}

		}
	}
</script>

<style lang="less" scoped>
	.bottom {
		.mt-5 {
			margin-top: 10rpx;
		}

		.ml-9-5 {
			margin-left: 19rpx;
		}

		.mt-5-5 {
			margin-top: 11rpx;
		}

		.font_2 {
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 23.7rpx;
			color: #666666;
		}

		.font_3 {
			font-size: 32rpx;
			font-family: PingFang SC;
			line-height: 29.6rpx;
			color: #222222;
		}

		.section_3 {
			margin: 0 33rpx;
			padding: 36rpx 24rpx 46rpx 32rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
		}

		.group_5 {
			padding-bottom: 6rpx;
		}

		.text_6 {
			line-height: 29.94rpx;
		}

		.image_8 {
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
		}

		.pos_2 {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.group_6 {
			margin-top: 65rpx;
		}

		.text-wrapper {
			padding: 8rpx 0;
			background-image: url('/static/icon/bk.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 29rpx;
			height: 29rpx;
		}

		.font_5 {
			font-size: 14rpx;
			font-family: PingFang SC;
			line-height: 13.06rpx;
			color: #2b8eff;
		}

		.font_4 {
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #222222;
		}

		.text_7 {
			line-height: 22.56rpx;
		}

		.text_8 {
			margin-left: 48rpx;
		}

		.group_7 {
			margin-top: 48rpx;
		}

		.text_9 {
			line-height: 22.48rpx;
		}

		.text_10 {
			margin-right: 4rpx;
		}

		.group_8 {
			margin-top: 48rpx;
		}

		.text_11 {
			line-height: 22.66rpx;
		}

		.group_9 {
			margin-top: 46rpx;
		}

		.text_12 {
			line-height: 22.54rpx;
		}

		.text_13 {
			line-height: 22.34rpx;
		}
	}


	.bGqu {
		height: 100vh;

		background: #f4f5f7;


		.text_4 {
			color: #222222;
			font-size: 36rpx;
			font-family: PingFang SC;
			line-height: 33rpx;
		}


		.mt-12-51 {
			margin-top: 25rpx;
		}

		.text_51 {
			color: #2b8eff;
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 22.02rpx;
		}

		.mt-17-5 {
			margin-top: 35rpx;
		}

		.mt-1-5 {
			margin-top: 3rpx;
		}

		.ml-11 {
			margin-left: 22rpx;
		}

		.ml-10-5 {
			margin-left: 21rpx;
		}

		.page {
			background-color: #f4f5f7;
			width: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			height: 100%;
		}

		.group {
			padding-bottom: 77rpx;
			overflow-y: auto;
		}

		.section {
			padding: 65.6rpx 0 145.38rpx;
			background-image: linear-gradient(180deg, #2b8eff4d 0%, #ffffff00 100%);
		}

		.group_2 {
			margin-left: 40rpx;
			margin-right: 30rpx;
		}

		.image_4 {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.group_4 {
			margin-right: 33.92rpx;
		}

		.text_4 {
			color: #222222;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 29.68rpx;
		}

		.text_5 {
			color: #666666;
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 22.44rpx;
		}

		.image_5 {
			margin-top: -75rpx;
			width: 100vw;
			height: 27.6vw;
		}

		.section_2 {
			margin: 12rpx 12rpx 0;
			padding: 0rpx 32.5rpx 40rpx 36rpx;
			background-color: #ffffff;
			border-radius: 18rpx;
		}

		.group_1 {
			padding: 0 3rpx;
		}

		.image_6 {
			width: 42rpx;
			height: 42rpx;
		}

		.font_2 {
			font-size: 32rpx;
			font-family: PingFang SC;
			line-height: 29.6rpx;
			color: #222222;
		}

		.text_6 {
			line-height: 29.66rpx;
		}

		.image_7 {
			width: 17rpx;
			height: 17rpx;
		}

		.image_8 {
			margin-right: 3rpx;
		}

		.group_5 {
			margin-top: 57rpx;
		}

		.image_9 {
			width: 48rpx;
			height: 48rpx;
		}

		.text_7 {
			line-height: 29.7rpx;
		}

		.image_10 {
			margin-top: 6.04rpx;
		}

		.group_6 {
			margin-top: 48.04rpx;
		}

		.group_7 {
			height: 54.96rpx;
		}

		.group_8 {
			margin-top: 6.96rpx;
		}

		.image_11 {
			margin-top: -54.96rpx;
		}

		.text_8 {
			line-height: 29.78rpx;
		}

		.image_12 {
			margin-top: 22.04rpx;
		}

		.group_9 {
			margin-top: 15.98rpx;
		}

		.text_9 {
			line-height: 29.78rpx;
		}

		.image_13 {
			margin-top: 9.02rpx;
		}

		.group_10 {
			margin-top: 28.96rpx;
		}

		.text_10 {
			line-height: 29.76rpx;
		}

		.group_11 {
			margin-top: 41.96rpx;
		}

		.group_12 {
			margin-top: 48rpx;
		}

		.text_11 {
			line-height: 28.82rpx;
		}

		.tab-bar {
			height: 16.26rpx;
		}

		.section_4 {
			background-color: #ffffff;
			height: 15.26rpx;
		}

	}
</style>